<template>
  <div>
    <div class="lefthead">
      <div style="position: relative">
        <img src="./left.png" style="width: 100%" />
        <div
          style="
            position: absolute;
            z-indent: 2;
            left: 40%;
            top: 30%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 4.67rem;
          "
        >
          {{ getName() }}
        </div>
      </div>
    </div>
    <div class="righthead">
      <div style="position: relative">
        <img src="./right.png" style="width: 100%" />
        <div
          style="
           width:70%;
            position: absolute;
            z-indent: 2;
            left: 40%;
            top: 50%;
            transform: translate(-50%, -50%);
          "
        >
          <el-col :span="24">
            <span>
              <span style="color: white"><timeAndDate /></span>
            </span>
          </el-col>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    };
  },
  methods: {
    getName() {
      const nameUrl = this.$route.path;
      return this.getNameByUrl(nameUrl);
    },
    getNameByUrl(url) {
      switch (url) {
        case "/big-screen-8":
          return "云网态势";
          break;
        case "/big-screen-7":
          return "数据共享";
          break;
        case "/big-screen-6":
          return "公共安全";
          break;
        case "/big-screen-5":
          return "市场监管";
          break;
        case "/big-screen-4":
          return "经济发展";
          break;
        case "/big-screen-3":
          return "应急调度";
          break;
        case "/big-screen-2":
          return "服务效能";
          break;
        case "/big-screen-1":
          return "政务服务";
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style>
.righthead {
  position: absolute;
  width: 72rem;
  right: 0;
  top: 5%;
  z-index: 10;
}
.lefthead {
  position: absolute;
  width: 72rem;
  left: 0;
  z-index: 10;
  top: 5%;
}
</style>
